<template>
    <div>
        <!--维度设置-->
        <div v-if="config.reportType!='map'" class="dimension" style="margin-top: 20px">{{i18n('list.dimenSet','维度设置')}}</div>
        <div v-else class="dimension" style="margin-top: 20px">{{i18n('list.addrSet','地址设置')}}</div>
        <div class="dimension_come">
            <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.dimensions" :group="{name: 'site',pull:'clone'}" animation="300"  dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
                <transition-group >
                    <div class="setup_tuo" @mouseenter="dimensionsen(index,'dimensions')" @mouseleave="dimensioneleave('null','dimensions')" v-for="(item,index) in config.dimensions" :key="item.fieldName">
                        <i style="float:left;margin-top: 3px" :class="['iconfont '+item.icon]"></i>
                        <span class="inpurlistspan" :title="item.fieldLabel">{{item.fieldLabel}}</span>
                        <span class="icon_config" v-show="dimensionId ==index">
                            <i class="iconfont iconup"  @click="up(index,'dimensions')" />
                            <i class="iconfont icondown"  @click="down(index,'dimensions')" />
                            <a-icon  type="delete" style="margin-top: 7px;" @click="dimensiondelete(index,'dimensions')" />
                            <span  class="basics-render">
                                   <a-icon type="setting" />
                                   <div class="basics-render-op">
                                       <span  @click="setSql(item)">{{i18n('list.fieldRender','字段渲染')}}</span>
                                       <span  v-show="config.reportType=='radar'" @click="setIndicatorMax(item)">{{i18n('list.indexConfig','指数配置')}}</span>
                                       <span v-if="item.dataType=='date'"  @click="dateSetting(item,index)">{{i18n('list.dateSet','日期设置')}}</span>
                                   </div>
                            </span>
                        </span>
                    </div>
                </transition-group>
            </vuedraggable>
            <div class="dimension_button" style="height: 30px;line-height: 30px;min-height:30px">{{i18n('list.dragRight','从右侧拖入维度')}}</div>
        </div>
        <div v-if="config.reportType!='lineBar'">
            <!--度量设置-->
            <div class="dimension" style="margin-top: 20px">{{i18n('list.metricSet','度量设置')}}</div>
            <div class="dimension_come">
                <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.measures" :group="{name: 'measure'}" animation="300"  dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" >
                    <transition-group >
                        <div class="setup_tuo" style="background: #9babed" @mouseenter="dimensionsen(index,'measures')"
                             @mouseleave="dimensionsen('null','measures')" v-for="(item,index) in config.measures" :key="item.fieldName">
                            <i style="float:left;margin-top: 3px" :class="['iconfont '+item.icon]"></i>
                            <a-input class="inpurlistinput" :title="item.fieldLabel" v-model="item.fieldLabel"></a-input>
                            <span class="icon_config" v-show="measuresId ==index">
                                <i class="iconfont iconup"  @click="up(index,'measures')" />
                                <i class="iconfont icondown"  @click="down(index,'measures')" />
                                <a-icon v-if="measuresId ==index" type="delete" style="float: right;margin-top: 8px;" @click="dimensiondelete(index,'measures')" />
                                <span v-if="(config.reportType=='map' || config.reportType=='numerical') && !config.isLegend" class="basics-render">
                                   <a-icon type="setting" />
                                   <div class="basics-render-op">
                                       <span v-if="config.reportType=='map'" @click="setColor(item,false)">{{i18n('list.colorConfig','颜色配置')}}</span>
                                       <span v-if="config.reportType=='numerical'" @click="setStyle(item)">{{i18n('list.styleConfig','样式配置')}}</span>
                                   </div>
                                </span>
                            </span>

                        </div>
                    </transition-group>
                </vuedraggable>
                <div class="dimension_button" style="height: 30px;line-height: 30px;min-height:30px">{{i18n('list.dragMetric','从右侧拖入度量')}}</div>
            </div>
            <div class="dimension" style="margin-top: 20px"
                 v-if="!notShowLegend.includes(config.reportType) || config.isLegend">{{i18n('list.colorLegend','颜色图例')}}</div>
            <div class="dimension_come"
                 v-if="!notShowLegend.includes(config.reportType) || config.isLegend">
                <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.colorLegends" :group="{name: 'site',pull:'clone'}" animation="300"  dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
                    <transition-group >
                        <div class="setup_tuo" @mouseenter="dimensionsen(index,'colorLegend')" @mouseleave="dimensioneleave('null','colorLegend')" v-for="(item,index) in config.colorLegends" :key="item.fieldName">
                            <i style="float:left;margin-top: 3px" :class="['iconfont '+item.icon]"></i>
                            <span class="inpurlistspan" :title="item.fieldLabel">{{item.fieldLabel}}</span>
                            <span class="icon_config" v-show="colorLegendId ==index">
                                <i class="iconfont iconup"  @click="up(index,'colorLegend')" />
                                <i class="iconfont icondown"  @click="down(index,'colorLegend')" />
                                <a-icon type="delete" style="float: right;margin-top: 8px;" @click="dimensiondelete(index,'colorLegend')" />
                                <span v-if="config.reportType=='map' && config.isLegend" class="basics-render">
                                   <a-icon type="setting" />
                                   <div class="basics-render-op">
                                       <span @click="setColor(item,true)">{{i18n('list.colorConfig','颜色配置')}}</span>
                                   </div>
                                </span>
                            </span>
                        </div>
                    </transition-group>
                </vuedraggable>
                <div class="dimension_button" style="height: 30px;line-height: 30px;min-height:30px">{{i18n('list.dragRight','从右侧拖入维度')}}</div>
            </div>
        </div>
        <!--度量设置（多Y轴）-->
        <div v-else>
            <div class="dimension" style="margin-top: 20px">{{i18n('list.metricSet','度量设置')}}<a-icon style="float: right;font-size: 16px;margin-right: 6px;margin-top: 5px" type="plus" @click="addMeasures" /></div>
            <div class="dimension_come" v-for="(measures,idx) in config.measureList"  @mouseenter="dimensionsen(idx,'latitude')" @mouseleave="dimensioneleave('null','latitude')">
                <div v-if="latitude ==idx"  class="basicDelete" @click="deletemeasure(idx)">
                    <i class="iconfont iconempty_fill"></i>
                </div>
                <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.measureList[idx]" :group="{name: 'measure'}" animation="300"  dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" >
                    <transition-group >
                        <div class="setup_tuo" style="background: #9babed" @mouseleave="dimensionsen('null','measures')" @mouseenter="dimensionsen(idx,'measures',index)" v-for="(item,index) in config.measureList[idx]" :key="item.fieldName">
                            <i style="float:left;margin-top: 3px" :class="['iconfont '+item.icon]"></i>
                            <a-input class="inpurlistinput" :title="item.fieldLabel" v-model="item.fieldLabel"></a-input>
                            <a-icon v-if="measuresId ==idx && measuresIdParent ==index" type="delete" style="float: right;margin-top: 8px;" @click="measureListDelete(idx,index)" />
                            <a-icon v-show="measuresId ==idx && measuresIdParent ==index"  class="adropdown" @click="setSetting(idx,index)" type="setting" />
                        </div>
                    </transition-group>
                </vuedraggable>
                <div class="dimension_button" style="height: 30px;line-height: 30px;min-height:30px">{{i18n('list.dragMetric','从右侧拖入度量')}}</div>
            </div>
        </div>

        <!--本图表的交互过滤条件-->
        <div class="dimension" style="margin-top: 20px" v-if="!notShowFilter.includes(config.reportType)">{{i18n('list.filterChart','本图表的交互过滤条件')}}</div>
        <div class="dimension_come" v-if="!notShowFilter.includes(config.reportType)">
            <vuedraggable class="setup" :options="{draggable: '.item-drag'}" v-model="config.filterParams" :group="{name: 'site',pull:'clone'}" animation="300"  dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass">
                <transition-group >
                    <div class="setup_tuo" @mouseenter="dimensionsen(index,'filterParams')" @mouseleave="dimensioneleave('null','filterParams')" v-for="(item,index) in config.filterParams" :key="item.fieldName">
                        <i style="float:left;margin-top: 3px" :class="['iconfont '+item.icon]"></i>
                        <a-input class="inpurlistinput" :title="item.fieldLabel" v-model="item.fieldLabel"></a-input>
                        <span class="icon_config" v-show="filterId ==index">
                                <i class="iconfont iconup"  @click="up(index,'filterParams')" />
                                <i class="iconfont icondown"  @click="down(index,'filterParams')" />
                                <a-icon  type="delete" style="margin-top: 7px;" @click="dimensiondelete(index,'filterParams')"/>
                            <span  class="basics-render">
                                   <a-icon type="setting" />
                                   <div class="basics-render-op">
                                       <span  @click="setCondition(item)">{{i18n('list.conditionSet','条件设置')}}</span>
                                   </div>
                            </span>
                        </span>
                    </div>
                </transition-group>
            </vuedraggable>
            <div class="dimension_button" style="height: 30px;line-height: 30px;min-height:30px">{{i18n('list.dragRight','从右侧拖入维度')}}</div>
        </div>

    </div>
</template>

<script>
import BasicsConfigJs from "@/views/modules/form/core/chartDef/BasicsConfigJs.js";

/**
 * 基础配置
 */
export default {
    name: "BasicsConfig",
    mixins: [BasicsConfigJs],
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartComponent", key);
        },
    }
}
</script>

<style scoped>
.adropdown{
    margin-top: 8px;
    margin-left: 5px;
}
.basics-render{
    position: relative;
}
.basics-render:hover .basics-render-op{
    display: block;
}
.basics-render-op{
    display: none;
    position: absolute;
    top: 27px;
    left: -30px;
    background: white;
    width: 64px;
    text-align: center;
    color: #697377;
    cursor: pointer;
    box-shadow: 0px 0px 6px 0px
    #ccd1dd;
    border-radius: 4px;
}
.icon_config{
    display: flex;
    line-height: 30px;
    float: right;
}
.icon_config i{
    margin-right: 4px;
}
.icon_config i:hover{
    cursor: pointer
}
.setup{
    margin-top: -14px;
    padding: 7px;
}
.setup >span{
    display: block;
    min-height: 90px;
}
.setup_tuo{
    background-color: #02c5b7;
    border-radius: 2px;
    display: flex;
    line-height: 26px;
    padding: 0 7px;
    color: white;
    margin-bottom: 5px;
    height: 30px;
}

.inpurlistspan{
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 30px;
    flex: 1;
}
.inpurlistinput{
    float: left;
    border: none;
    background: none;
    color: white;
    margin: 0px;
    font-size: 14px;
    line-height: 30px;
    flex: 1;
    margin-right: 10px;
}
.dimension_button{
    line-height: 30px;
    text-align: center;
    color: #c0c5cc;
}
.dimension_come{
    margin-top: 13px;
    min-height: 90px;
    background-color: #ffffff;
    border-radius: 4px;
    border: dashed 1px #dadde0;
    padding-top: 15px;
    position: relative;
}
.basicDelete{
    width: 25px;
    height: 25px;
    background: #ff6d75;
    position: absolute;
    right: -7px;
    top: -12px;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
}
.basicDelete i{
    color: white;
}
.dimension_list{
    overflow: hidden;
    width: 100%;
}
.dimension_list span{
    color: #46494d;
    font-size: 12px;
    margin-left: 5px;
}
.dimension_list li{
    line-height: 30px;
    width: 100%;

}
.dimension_list li i:nth-child(1){
    color: #a0b3ff;
}
.dimension_list li i:nth-child(3){
    color:#c0c5cc;
    float: right;
    cursor:pointer;
}
.dimension{
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border: solid 1px #dadde0;
    padding:0px 5px;
}
</style>